<template>
  <el-select
    v-model="comValue"
    :disabled="disabled"
    placeholder="请选择"
    :style="{ width: width }"
    :clearable="clearable"
    @change="change"
    :max-collapse-tags="maxCollapseTags"
    :multiple="multiple"
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="(item, i) in options"
      :key="i"
      :label="item[customOptionsName['label']]"
      :value="item[customOptionsName['value']]"
    />
  </el-select>
</template>

<script setup>
/**
 * org-select-multiple 下拉多选/单选组件（支持自定义接口）
 * @description 通过自定义接口获取下拉选项
 * @property {Array} modelValue 双向绑定值
 * @property {Boolean} disabled 是否禁用组件
 * @property {String} width 组件宽度
 *  @value  100%
 * @property {Boolean} multiple 是否可多选
 *  @value  true
 *  * @property {Boolean} clearable 是否可一键清除
 *  @value  true
 * @property {String} apiUrl 自定义接口地址</role/list>
 * @property {Object} searchForm 接口传参
 * @property {String,Number} maxCollapseTags 最大可展示tags数量
 *  @value  1
 * @property {Object} customOptionsName 自定义接口返回数据字段名称-匹配下拉字段
 *  @value  {label:'name',value:'id'}
 * @property {String} valueType 值类型-逗号分隔的字符串/数组 或者单个String/Number
 *  @value  String/Array/Number
 *
 **/
import { get_multiple_options_list } from '@/api/api.js'
import { computedAsync } from '@vueuse/core'
import { isArray } from 'lodash-es'
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: [Array, String],
    require: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '100%'
  },
  multiple: {
    type: Boolean,
    default: true
  },
  clearable: {
    type: Boolean,
    default: true
  },
  apiUrl: {
    type: String
  },
  searchForm: {
    type: Object
  },
  maxCollapseTags: {
    type: [String, Number],
    default: 1
  },
  customOptionsName: {
    type: Object,
    default: () => {
      return {
        label: 'name',
        value: 'id'
      }
    }
  },
  valueType: {
    type: String,
    default: 'Array'
  }
})

let comValue = ref(props.multiple ? [] : '')
// comValue.value =
//   props.modelValue?.length > 0
//     ? props.valueType == 'String'
//       ? props.modelValue.split(',')
//       : props.modelValue
//     : props.valueType == 'String'
//     ? ''
//     : []

const options = computedAsync(async () => {
  let arr
  if (props.apiUrl) {
    let res = await get_multiple_options_list(props.apiUrl, props.searchForm)
    if (res.succeed) {
      arr = res.data
    }
  } else {
    arr = []
  }
  return arr
})

watch(
  () => props.modelValue,
  val => {
    if (props.multiple) {
      if (val) {
        if (props.valueType === 'Array') {
          comValue.value = val
        } else if (props.valueType === 'String') {
          comValue.value = val.split(',')
        }
      } else {
        if (props.valueType === 'Array') {
          comValue.value = []
        } else if (props.valueType === 'String') {
          comValue.value = ''
        }
      }
    } else {
      if (val || val === 0) {
        comValue.value = props.valueType === 'Number' ? val : val + ''
      } else {
        comValue.value = ''
      }
    }
  },
  {
    immediate: true
  }
)

watch(
  () => comValue.value,
  (newVal, oldVal) => {
    if (props.multiple) {
      if (newVal && newVal !== oldVal) {
        if (props.valueType === 'Array') {
          let res1 = Array.isArray(newVal)
          if (res1) {
            emit('update:modelValue', newVal)
          } else {
            emit('update:modelValue', newVal.spilt(','))
          }
        } else if (props.valueType === 'String') {
          let res2 = Array.isArray(newVal)
          if (res2) {
            emit('update:modelValue', newVal.join())
          } else {
            emit('update:modelValue', newVal)
          }
        }
      }
    } else {
      if (newVal !== oldVal) {
        emit('update:modelValue', newVal)
      }
    }
  }
)

const change = val => {
  emit('change', val)
}
</script>

<style lang="scss" scoped></style>
